// 播放控制器
<template>
    <div class="playController">
        <div class="left">
            <img ref="img" :src="al.picUrl" alt="">
            <div class="content">
                <div class="title">{{name}}</div>
                <div class="tips">横划可以切换上下首</div>
            </div>
        </div>
        <div class="right">
            <!-- 控制播放还是暂停 -->
            <span ref="play" class="iconfont icon-bofang" @click="play"></span>
            <span class="iconfont icon-santiaoxian_"></span>
        </div>
        <audio ref="audio" :src="`https://music.163.com/song/media/outer/url?id=${id}.mp3`"></audio>
    </div>
</template>
<script>
// 引入
import { mapState,playCurrentIndex} from "vuex";
export default {
    methods: {
        play(){
            if(this.$refs.audio.paused){
                this.$refs.audio.play()
                event.target.className = 'iconfont icon-zanting'
            }else{
                this.$refs.audio.pause()
                event.target.className = 'iconfont icon-bofang'
            }
            
        }
    },
    watch:{
        id:{
            handler(newId, oldId){
                if(newId){
                    console.log(newId);
                    console.log(this.$refs.audio.src);
                    // 监听到id改变就重新赋值src
                    this.$refs.audio.src="`https://music.163.com/song/media/outer/url?id=${newId}.mp3`"
                    setTimeout(()=>{
                        this.$refs.play.className = 'iconfont icon-zanting'
                        this.$refs.audio.play()
                    },100)
                    
                    
                }else{
                    this.$refs.audio.src="`https://music.163.com/song/media/outer/url?id=${oldId}.mp3`"
                    this.$refs.audio.pause()
                    event.target.className = 'iconfont icon-bofang'
                }
            },
            immediate: false
        }
        
    },
    computed:{
        // 接收store里面的参数
        ...mapState([
            'playlist',
            'playCurrentIndex',
            'al',
            'name',
            'tracks',
            'id'
        ])
    }
}
</script>
<style lang="less" scoped>
    .playController{
        height: 1rem;
        width: 7.5rem;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        border-top: 0.01rem solid #ccc;
        .left{
            display: flex;
            align-items: center;
            // 小图片
            img{
                width: 1rem;
                height: 1rem;
            }
            .content{
                display: flex;
                flex-direction: column;
                margin-left: 0.4rem;
                .title{
                    font-size: 0.35rem;
                    width: 4rem;
                    white-space: nowrap;
                    overflow: hidden;
                }
                .tips{
                    color: #999
                }
            }
        }
        .right{
            display: flex;
            align-items: center;
            .iconfont{
                font-size: 0.6rem;
                margin: 0 0.2rem;
            }
        }
    }
</style>